<template>
    <div style='background-color:rgba(0,0,0,0.01);'>
        <el-dialog
            :append-to-body="true"
            title='提示'
            :visible.sync='guideDialogVisible'
            width='30%'>
            <span>确认抛载吗？</span>
            <span slot='footer' class='dialog-footer'>
                <el-button @click="guideDialogVisible = false">取 消</el-button>
                <el-button type='primary' @click='dispose()'>确 定</el-button>
            </span>
        </el-dialog>
        <el-row :gutter="15">
            <el-col justify='center'>
                <el-button class="button3" id='transBtn' @click='guideDialogVisible = true'>抛载</el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script>

export default {
    name: "EmergencyPanel",
    props : {
        "mode" : {
            type : String,
            Default : "game"
        }
    },
    data() {
        return {
            guideDialogVisible : false
        }
    },
    created() {
    },
    components : {
    },
    methods : {
        dispose: function() {
            this.guideDialogVisible = false
            // 从接口获取数据并添加到数组
            this.$axios.get(this.GLOBAL.serverIp + '/api/dispose/').then((res) => {
                if (res.data.status !== 200) {
                    this.$message.error('出现错误，无法抛载');
                } else {
                    this.$message.success('抛载指令已传达');
                }
            }).catch((error)=> {
                this.$message.error('无法连接到鱼体，抛载指令未传达');
            });
        },
    }
}
</script>

<style scoped>
    .el-row{
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .button1 {
        height: 100px;
    }
    .button2 {
        height: 65px;
    }
    .button3 {
        width: 100%;
        height: 65px;
        color: white;
        font-size: 15px;
    }
    >>> .el-slider__runway {
        background-color: #403D39; /* 滑块颜色 */
    }
    >>> .el-slider__stop { /*  滑块节点的颜色 */
        background-color: gray;
    }
    >>> .el-slider__bar {
        background-color: #064079; /*  滑块滑过来的颜色 */
    }
    #transBtn {
        background-color: transparent; /* 按钮背景颜色 */
    }
    >>> .el-switch__core {
        background-color: #403D39; /* 开关关闭时的颜色 */
        border: none;
    }
    >>> .el-switch.is-checked .el-switch__core { /* 开关打开时的颜色 */
        background-color: #064079;
    }
</style>
